---
title: Single vertical list
description: A guide to use Fluid DnD with a single vertical list.
---

import SingleVerticalList from "@/components/vue/SingleVerticalList.vue";
import { Code } from "@astrojs/starlight/components";

### List of number example

To showing how to use **Fluid DnD** for sorting a single list.
First, we're going to create a list of numbers:

export const listOfNumbers = `<script setup lang="ts">
import { ref } from "vue";
import { useDragAndDrop } from "fluid-dnd/vue";

const list = ref([1, 2, 3]);
const [ parent ] = useDragAndDrop(list);

</script>`;

<Code code={listOfNumbers} lang="vue" />

Next, create a list of numbers on vue template:

export const listOfNumbersHTML = `
<template>
  <ul class="number-list">
    <li class="number" v-for="(element, index) in list">
      {{ element }}
    </li>
  </ul>
</template>
<style>
  .number {
    border-style: solid;
    padding-left: 5px;
    margin-top: 0.25rem;
    border-width: 2px;
  }
  .number-list {
    display: block;
    padding: 10px;
  }
</style>
`;

<Code code={listOfNumbersHTML} lang="vue" />

:::caution
Avoid to setting _css_ `transform` property or `transitions` between diferent `transform` values to **draggable** elements because **Fluid DnD** update those properties automagically.
:::

### Adding reference to parent element

First, add a reference to the created `parent` _element_ from `useDragAndDrop`:

export const highlightsDroppable = ["ref", "parent"];

export const listOfNumbersDroppable = `
<template>
   <ul ref="parent" class="number-list">
      <li class="number" v-for="(element, index) in list">
        {{ element }}
      </li>
   </ul>
</template>
`;

<Code code={listOfNumbersDroppable} lang="vue" mark={highlightsDroppable} />

### Adding reference to children

For each `<li>` element we'll pass the `index` **attribute** to knowing the actual position and the `key` **attribute** that uniquely identify each element:

export const listOfNumbersDraggable = `

<template>
    <ul ref="parent" class="number-list">
      <li class="number" v-for="(element, index) in list" :index="index" :key="element">
        {{ element }}
      </li>
    </ul>
</template>`;

export const highlightsDraggable = [':index="index"',':key="element"'];

<Code code={listOfNumbersDraggable} lang="vue" mark={highlightsDraggable} />

### Preview

<div class="pl-8">
  <SingleVerticalList client:load />
</div>
